<template>
  <div id="toolForum">
    <a-list
      item-layout="vertical"
      size="large"
      :pagination="pagination"
      :data-source="listData"
    >
      <template #footer>
        <div>
          <b>ant design vue</b>
          footer part
        </div>
      </template>
      <template #renderItem="{ item }">
        <a-list-item key="item.title">
          <template #actions>
            <span v-for="{ icon, text } in actions" :key="icon">
              <component :is="icon" style="margin-right: 8px" />
              {{ text }}
            </span>
          </template>
          <template #extra>
            <img
              width="272"
              alt="logo"
              src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
            />
          </template>
          <a-list-item-meta :description="item.description">
            <template #title>
              <a :href="item.href">{{ item.title }}</a>
            </template>
            <template #avatar>
              <a-avatar :src="item.avatar" />
            </template>
          </a-list-item-meta>
          {{ item.content }}
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script lang="ts" setup>
import {
  LikeOutlined,
  MessageOutlined,
  StarOutlined,
} from "@ant-design/icons-vue";
import { onBeforeMount, reactive, ref } from "vue";
import { toolVOByPage } from "@/api/tool";
import { message } from "ant-design-vue";

const listData: Record<string, string>[] = [];

for (let i = 0; i < 23; i++) {
  listData.push({
    href: "https://www.antdv.com/",
    title: `ant design vue part ${i}`,
    avatar: "https://joeschmoe.io/api/v1/random",
    description:
      "Ant Design, a design language for background applications, is refined by Ant UED Team.",
    content:
      "We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.",
  });
}

const actions: Record<string, any>[] = [
  { icon: StarOutlined, text: "156" },
  { icon: LikeOutlined, text: "156" },
  { icon: MessageOutlined, text: "2" },
];

const tableData = ref([]);

// 搜索参数定义
interface queryParamsBody {
  name: string;
  status: number;
  current: number;
  pageSize: number;
}

// 搜索参数
const queryParams = reactive<queryParamsBody>({
  name: "",
  status: 1,
  current: 0,
  pageSize: 8,
});

//生命周期
onBeforeMount(() => {
  //获取数据
  getData();
});

const getData = async () => {
  toolVOByPage(queryParams)
    .then((res: any) => {
      if (res.code == 0) {
        tableData.value = res.data.records;
        pagination.total = res.data.total;
      } else {
        message.error("获取数据失败");
      }
    })
    .catch((err) => {
      message.error("系统错误，" + err.message);
    });
};

// 分页配置类型定义
interface PaginationProps {
  current: number;
  pageSize: number;
  total: number;
  showSizeChanger?: boolean;
  pageSizeOptions?: number[];
  showQuickJumper?: boolean;
  showTotal?: (total: number, range: [number, number]) => string;
  onChange?: object;
}

// 监听分页变化
const onPaginationChange = (page: number, pageSize: number) => {
  //更新分页参数
  pagination.current = page;
  pagination.pageSize = pageSize;
  //更新查询参数
  queryParams.current = page;
  queryParams.pageSize = pageSize;
  //获取数据
  getData();
};

// 分页配置
const pagination = reactive<PaginationProps>({
  current: 1, // 当前页数
  pageSize: 8, // 每页条数
  total: 0, // 数据总数，用于计算总页数
  showSizeChanger: false, // 是否显示每页显示个数选择器
  pageSizeOptions: [8, 32, 48, 54], // 每页显示个数选择器的选项设置
  showQuickJumper: false, // 是否显示快速跳转按钮
  showTotal: (total: number) => `共 ${total} 条数据`, // 自定义显示总数
  onChange: onPaginationChange, // 页码改变时的回调函数
});
</script>

<style scoped></style>
